iT邦幫忙

2024 iThome 鐵人賽

DAY 7
1
JavaScript

從零開始學習JavaScript 30天系列 第 7

[Day 7] JavaScript 流程控制:判斷式

  • 分享至 

  • xImage
  •  

Hi,大家好,我是Tony,是一個對於程式設計有一點點概念的超級新手。

挑戰來到第七天!
今天學習的內容是:JavaScript流程控制:判斷式

學習內容來自
彭彭老師JavaScript 流程控制:判斷式
https://www.youtube.com/watch?v=2qTB2jws1ZI&list=PL-g0fdC5RMbqW54tWQPIVbhyl_Ky6a2VI&index=15

昨天的學習內容:[Day 6] JavaScript 運算符號小運用-乘法計算器
https://ithelp.ithome.com.tw/articles/10344343/


1. 什麼是 流程控制、判斷式、迴圈?

流程控制是讓程式運作之間有更多的變化。
判斷式是建立邏輯判斷,並做出對應處理,判斷出true的時候做什麼、false時做什麼。
迴圈是可以重複執行程式區塊。(應該是明天會學習的內容)

2. 什麼是 程式區塊?

語法上用大括號{}包起來的程式碼。
範例

{
    console.log("Hello");
    console.log("今天是第七天")
}

3. if判斷式

if判斷式可以根據條件決定是否要執行程式區塊
基本語法:

if(布林值){
           如果布林值為true,執行這個程式區塊
}

4. if...else判斷式

if...else判斷式根據條件與否,執行對應的程式區塊。
基本語法:

if(布林值){
    如果布林值為true,執行這個程式區塊
}else{
    如果布林值為false,執行這個程式區塊
}

5. if...else if...else判斷式

使用多個條件對應多個程式區塊,組合在一起使用。
基本語法:

if(布林值){
    如果布林值為true,執行這個程式區塊1
}else if(布林值){
    如果布林值為true,執行這個程式區塊2
}else if(布林值){
    如果布林值為true,執行這個程式區塊3
}else{
    如果布林值為false,執行這個程式區塊4
}

如果遇到第一個if是true,就會執行程式區塊1,然後結束。
第一個if是false,就會跑到下一個else if判斷,判斷是true,則執行程式區塊2,然後結束;
若是判斷false,則又跑到下一個else if判斷,判斷是true,則執行程式區塊3,然後結束...

以此類推,只要判斷是true,就會執行當下的程式區塊並結束,判斷為false就會往下一個判斷式去。
若是判斷皆為false,則會執行最後的程式區塊4。


練習

  • 練習1:if 判斷式基本語法-true

if判斷式布林值為true,會顯示程式區塊內容"我是對的"
"判斷式結束"在程式區塊之外,所以也會顯示

  <script>
      if(true){
          console.log("我是對的");
      }    
          console.log("判斷式結束");
  </script>     

網頁結果1
https://ithelp.ithome.com.tw/upload/images/20240814/20168410AbZqzAMKf4.jpg


  • 練習2:if 判斷式基本語法-false

if判斷式布林值為false,所以不會顯示程式區塊內容"我是對的"
"判斷式結束"在程式區塊之外,所以會顯示

  <script>
      if(false){
          console.log("我是對的");
      }    
      console.log("判斷式結束");
  </script>     

網頁結果2
https://ithelp.ithome.com.tw/upload/images/20240814/20168410tVixwjskVv.jpg


  • 練習3:ATM領錢,if判斷式_成功領錢有提示

使用宣告money變數與promept對話框,讓使用者輸入要領的數字。
if判斷式結合比較變數,比較變數的結果就是布林值,小於等於十萬元為true,顯示領錢成功,
否則不會顯示內容。語法如下:

  <script>
      let money=prompt("您要領多少錢","");
      if(money<=100000){
          console.log("領錢成功");      
      }
      console.log("判斷式結束");      
  </script>     

網頁結果3 (Youtube影片請點擊播放)
Yes


  • 練習4:ATM領錢,if...else判斷式_領錢成功或失敗都有提示,

基本設定同上
if...else判斷式,true顯示領錢成功,false顯示領錢失敗金額需小於十萬元。
語法如下:

  <script>
      let money=prompt("您要領多少錢","");
      if(money<=100000){
          console.log("領錢成功");      
      }else{
          console.log("失敗,領取金額需小於十萬元");
      }
      console.log("判斷式結束");      
  </script>     

網頁結果4 (Youtube影片請點擊播放)
Yes


  • 練習5:ATM領錢,if...else if...else判斷式_領錢成功或失敗都有提示,小於100不能領。

基本設定同上
if...else if...else判斷式,第一段先設定小於100不能領錢,第二段就是小於等於十萬可以領,就後就是大於十萬不能領。
語法如下:

  <script>
      let money=prompt("您要領多少錢","");
      if(money<100){
          console.log("小於100元不能領出");
      }else if(money<=100000){
          console.log("領錢成功");      
      }else{
          console.log("失敗,領取金額需小於十萬元")
      }
      console.log("判斷式結束");      
  </script>     

網頁結果5 (Youtube影片請點擊播放)
Yes

以上就是今天的學習內容與練習,
現在開始可以做一些比較有趣的互動了很開心,
今天還額外學會了上傳影片到Youtube,真是意外的收穫。
現在練習的時間加重不少...希望可以持續學習並完整分享給大家。
謝謝大家,也請大家多多指教。


上一篇
[Day 6] JavaScript 運算符號小運用-乘法計算器
下一篇
[Day 8] JavaScript 流程控制:迴圈基礎
系列文
從零開始學習JavaScript 30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言